<template>
<div style="margin-top:20px">
    <table cellspacing="0">
        <tr>
            <td colspan="2" class="tou">
                <h5>楼盘物业类型</h5>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>物业类型</span>
            </td>
            <td class="twotd">
                <el-cascader v-model="child_id" :options="options" clearable @change="aa" class="shuru" ref="cascaderAddr"></el-cascader>
            </td>
        </tr>
        <tr>
            <td colspan="2" class="tou">
                <h5>楼盘概要描述</h5>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>开发商名称</span>
            </td>
            <td class="twotd">
                <el-input v-model="developer_name" placeholder="请输入内容" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘名称</span>
            </td>
            <td class="twotd">
                <el-input v-model="real_estate_name" placeholder="请输入内容" class="shuru" @blur="py"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>关键词提取</span>
            </td>
            <td class="twotd">
                <el-input type="textarea" placeholder="请输入内容" v-model="real_estate_key_words" maxlength="100" show-word-limit class="shuru"></el-input>
                <div class="hint">提取楼盘关键词，尽可能多的提取，用逗号区分不同关键词</div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘封面照片</span>
            </td>
            <td class="twotd">
                <buildingalbum :xinxi="this.photo" @LouisVuitton1="LouisVuitton1" class="xiangche"></buildingalbum>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>相关证件</span>
            </td>
            <td class="twotd">
                <buildingalbum @LouisVuitton2="LouisVuitton2" :xinxi="this.photo2" class="xiangche"></buildingalbum>
                <buildingalbum @LouisVuitton3="LouisVuitton3" :xinxi="this.photo3" class="xiangche"></buildingalbum>
                <buildingalbum @LouisVuitton4="LouisVuitton4" :xinxi="this.photo4" class="xiangche"></buildingalbum>
                <buildingalbum @LouisVuitton5="LouisVuitton5" :xinxi="this.photo5" class="xiangche"></buildingalbum>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>所属区位</span>
            </td>
            <td class="twotd">
                <el-cascader v-model="location" :options="options2" clearable @change="aa" class="shuru"></el-cascader>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>交通区位</span>
            </td>
            <td class="twotd">
        <tr class="border">
            <td>环线位置</td>
            <td>
                <el-select v-model="value5" placeholder="选择环线" @change="aa" class="shuru">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </td>
        </tr>
        <tr class="border">
            <td>轨道交通</td>
            <td>
                <el-cascader v-model="value10" :options="options10" clearable class="shuru"></el-cascader>
            </td>
        </tr>
        <tr class="border">
            <td>BRT交通</td>
            <td>
                <el-cascader v-model="value11" :options="options11" clearable class="shuru"></el-cascader>
            </td>
        </tr>
        </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘地址</span>
            </td>
            <td class="twotd">
                <el-input v-model="real_estate_address" placeholder="请输入内容" class="shuru"></el-input>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>地图坐标</span>
            </td>
            <td class="twotd">
                <div>
                    <el-input v-model="map_coordinates" placeholder="自动填写" class="shuru" :disabled="true"></el-input>
                    <p class="hint">坐标值将根据所示地区位置自动获取</p>
                </div>
                <div id="ditu">
                    <baiduMap @mapfun="mapfun"></baiduMap>
                </div>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>二级域名</span>
            </td>
            <td class="twotd">
                <el-input v-model="secondary_domain" placeholder="自动生成" class="shuru" disabled></el-input>.SSSS.COM
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>楼盘权重</span>
            </td>
            <td class="twotd">
                <el-select v-model="value12" placeholder="选择" class="ba shuru">
                    <el-option v-for="item in options12" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </td>
        </tr>
        <tr>
            <td class="onetd">
                <span>*</span>
                <span>合作形式</span>
            </td>
            <td class="twotd">
                <el-select v-model="value13" placeholder="选择" class="ba shuru">
                    <el-option v-for="item in options13" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </td>
        </tr>
    </table>
    <div class="save">
        <!-- <el-button type="primary" style="margin-right:16px">上一步</el-button> -->
        <el-button type="primary" @click="next">下一步</el-button>
    </div>
</div>
</template>

<script>
// import "element-ui/lib/theme-chalk/index.css";
// import ElementUI from "element-ui";
import baiduMap from "./baidumap";
import HanziToPinyin from "./hanziToPinyin";

// 楼盘相册
import buildingalbum from "./xiangche";
import * as api from "../utils/api";
import qs from "qs";

export default {
    name: "BuildingProfile",
    components: {
        baiduMap,
        buildingalbum,
    },
    data() {
        return {
            photo: {
                name: "楼盘封面",
                listType: "picture",
                limit: 3,
                ziduan: "file",
                jiekou: api.POST_Approve,
                fun: "LouisVuitton1",
            },
            photo2: {
                name: "国有土地使用证",
                listType: "picture",
                limit: 1,
                ziduan: "file",
                jiekou: api.POST_Approve,
                fun: "LouisVuitton2",
            },
            photo3: {
                name: "建设工程规划许可证",
                listType: "picture",
                limit: 1,
                ziduan: "file",
                jiekou: api.POST_Approve,
                fun: "LouisVuitton3",
            },
            photo4: {
                name: "建筑工程施工许可证",
                listType: "picture",
                limit: 1,
                ziduan: "file",
                jiekou: api.POST_Approve,
                fun: "LouisVuitton4",
            },
            photo5: {
                name: "建设用地规划许可证",
                listType: "picture",
                limit: 1,
                ziduan: "file",
                jiekou: api.POST_Approve,
                fun: "LouisVuitton5",
            },
            // =======联级下拉
            location: "",
            // ======上传字段========
            // 物业类型.子级id
            child_id: "",
            // 开发商名称
            developer_name: "",
            // 楼盘名称
            real_estate_name: "",
            // 楼盘关键词
            real_estate_key_words: "",
            // 楼盘封面图片路径
            real_estate_cover_map: "",
            // 国有土地使用证
            state_land_use_permits: "",
            //建筑工程规划许可证
            construction_project: "",
            //建筑工程施工许可证
            construction_permit: "",
            // 建设用地规划许可证
            building_land_planning_permit: "",
            // 区县
            district: "",
            // 板块
            module_station: "",
            // 环线位置
            loop_position: "",
            // 轨道交通线路
            rai: "",
            // 轨道站点
            track_station: "",
            // BRT线路
            brt: "",
            // BRT站点
            brt_station: "",
            // 楼盘地址
            real_estate_address: "",
            // 地图坐标
            map_coordinates: "",
            // 二级域名
            secondary_domain: "",
            // 楼盘权重
            property_weight: "",
            // 合作形式
            form_of_cooperation: "",
            // ===================
            options: [],
            options2: [],
            value5: "",
            options3: [],
            options10: [],
            value10: "",
            options11: [],
            value11: "",
            value: "",
            value12: "",
            options12: [{
                    value: "1级",
                    label: "1级",
                },
                {
                    value: "2级",
                    label: "2级",
                },
                {
                    value: "3级",
                    label: "3级",
                },
                {
                    value: "4级",
                    label: "4级",
                },
                {
                    value: "5级",
                    label: "5级",
                },
            ],
            value13: "",
            options13: [{
                    value: "未合作",
                    label: "未合作",
                },
                {
                    value: "分销合作",
                    label: "分销合作",
                },
                {
                    value: "尾盘合作",
                    label: "尾盘合作",
                },
                {
                    value: "常规规则",
                    label: "常规规则",
                },
            ],
            // 状态判断
            statePreservation: "",
            abc: "",
        };
    },
    created() {
        this.zoneBit();
        this.propertyType();
        this.loopLine();
        this.pathway();
        this.brt1();
    },
    computed: {},
    methods: {
        next() {
            console.log(111);
            // 下一步提交保存
            this.$emit("next");
            // if (
            //     this.child_id &&
            //     this.developer_name &&
            //     this.real_estate_name &&
            //     this.real_estate_key_words &&
            //     this.location &&
            //     this.value5 &&
            //     this.value10 &&
            //     this.value11 &&
            //     this.real_estate_address &&
            //     this.map_coordinates &&
            //     this.secondary_domain &&
            //     this.value12 &&
            //     this.value13 &&
            //     this.real_estate_cover_map &&
            //     this.state_land_use_permits &&
            //     this.construction_project &&
            //     this.construction_permit &&
            //     this.building_land_planning_permit
            // ) {
            //     this.axios({
            //         url: api.POST_ADDPREMISES,
            //         method: "post",
            //         data: {
            //             // 物业类型.子级id
            //             child_id: this.child_id[1],
            //             // 开发商名称
            //             developer_name: this.developer_name,
            //             // 楼盘名称
            //             real_estate_name: this.real_estate_name,
            //             // 楼盘关键词
            //             real_estate_key_words: this.real_estate_key_words,
            //             // 楼盘封面图片路径
            //             real_estate_cover_map: this.real_estate_cover_map,
            //             // 国有土地使用证
            //             state_land_use_permits: this.state_land_use_permits,
            //             //建筑工程规划许可证
            //             construction_project: this.construction_project,
            //             //建筑工程施工许可证
            //             construction_permit: this.construction_permit,
            //             // 建设用地规划许可证
            //             building_land_planning_permit: this.building_land_planning_permit,
            //             // 区县
            //             district: this.location[0],
            //             // 板块
            //             module_station: this.location[1],
            //             // 环线位置
            //             loop_position: this.value5,
            //             // 轨道交通线路
            //             rai: this.value10[0],
            //             // 轨道站点
            //             track_station: this.value10[1],
            //             // BRT线路
            //             brt: this.value11[0],
            //             // BRT站点
            //             brt_station: this.value11[1],
            //             // 楼盘地址
            //             real_estate_address: this.real_estate_address,
            //             // 地图坐标
            //             map_coordinates: this.map_coordinates,
            //             // 二级域名
            //             secondary_domain: this.secondary_domain,
            //             // 楼盘权重
            //             property_weight: this.value12,
            //             // 合作形式
            //             form_of_cooperation: this.value13,
            //         },
            //     }).then((data) => {
            //         console.log(data.data.data);
            //     });
            // } else {
            //     this.$message({
            //         message: "请完善相关信息",
            //         type: "warning",
            //     });
            // }
        },
        mapfun(mapdata) {
            this.map_coordinates = mapdata;
        },
        hucan(hc) {
            console.log("回传数据");
            console.log(hc);
        },
        /* 关闭 */
        quxiao() {
            this.dialogVisible = false;
        },
        aa(val) {
            console.log(val);
        },
        py() {
            // console.log(
            //     HanziToPinyin.instance.initialTreatment(this.buildingNames)
            // );
            this.secondary_domain = HanziToPinyin.instance.initialTreatment(
                this.real_estate_name
            );

            // console.log(
            //     "输出拼音" + HanziToPinyin.instance.codefans_net_CC2PY(this.input)
            // );
        },
        // 物业类型请求处理函数
        propertyType() {
            this.axios({
                url: api.GET_UPLOADPHOTO,
                method: "get",
            }).then((data) => {
                // console.log(data);
                if (data.data.code === 200) {
                    console.log(data.data.data);
                    for (let i = 0; i < data.data.data.length; i++) {
                        // console.log("大循环");
                        let obj = {};
                        obj["value"] = data.data.data[i].property_type_name;
                        obj["label"] = data.data.data[i].property_type_name;
                        obj["children"] = [];
                        for (
                            let j = 0; j < data.data.data[i].propertyTypeList.length; j++
                        ) {
                            let ojk = {};
                            ojk["value"] =
                                data.data.data[i].propertyTypeList[j].property_type_id;
                            ojk["label"] =
                                data.data.data[i].propertyTypeList[j].property_type_name;
                            obj.children.push(ojk);
                        }
                        this.options.push(obj);
                    }
                }
            });
        },
        // 区位请求处理函数
        zoneBit() {
            this.axios({
                url: api.GET_area,
                method: "get",
            }).then((data) => {
                // console.log(data);
                if (data.status === 200) {
                    for (let i = 0; i < data.data.dataList.length; i++) {
                        // console.log("大循环");
                        let obj = {};
                        obj["value"] = data.data.dataList[i].location_name;
                        obj["label"] = data.data.dataList[i].location_name;
                        obj["children"] = [];
                        for (
                            let j = 0; j < data.data.dataList[i].locationList.length; j++
                        ) {
                            let ojk = {};
                            ojk["value"] =
                                data.data.dataList[i].locationList[j].location_name;
                            ojk["label"] =
                                data.data.dataList[i].locationList[j].location_name;
                            obj.children.push(ojk);
                        }
                        this.options2.push(obj);
                    }
                }
            });
        },
        // 环线位置处理函数
        loopLine() {
            this.axios({
                url: api.GET_loop_line,
                method: "get",
                params: {
                    limit: 10000000,
                    page: 1,
                },
            }).then((data) => {
                if (data.status === 200) {
                    // console.log(data.data.dataList);
                    for (let i = 0; i < data.data.dataList.length; i++) {
                        let obj = {};
                        obj["value"] = data.data.dataList[i].location_name;
                        obj["label"] = data.data.dataList[i].location_name;
                        this.options3.push(obj);
                    }
                    // console.log(this.options3);
                }
            });
        },
        // 轨道交通处理函数
        pathway() {
            this.axios({
                url: api.GET_traffic,
                method: "get",
                params: {
                    limit: 100,
                    location_type: "轨道交通",
                    page: 1,
                },
            }).then((data) => {
                if (data.status === 200) {
                    for (let i = 0; i < data.data.dataList.length; i++) {
                        let obj = {};
                        obj["value"] = data.data.dataList[i].location_name;
                        obj["label"] = data.data.dataList[i].location_name;
                        obj["children"] = [];
                        for (
                            let j = 0; j < data.data.dataList[i].locationList.length; j++
                        ) {
                            let ojk = {};
                            ojk["value"] =
                                data.data.dataList[i].locationList[j].location_name;
                            ojk["label"] =
                                data.data.dataList[i].locationList[j].location_name;
                            obj.children.push(ojk);
                        }
                        this.options10.push(obj);
                    }
                }
            });
        },
        // BRT交通处理函数
        brt1() {
            this.axios({
                url: api.GET_traffic,
                method: "get",
                params: {
                    limit: 10000000,
                    location_type: "BRT交通",
                    page: 1,
                },
            }).then((data) => {
                if (data.status === 200) {
                    for (let i = 0; i < data.data.dataList.length; i++) {
                        let obj = {};
                        obj["value"] = data.data.dataList[i].location_name;
                        obj["label"] = data.data.dataList[i].location_name;
                        obj["children"] = [];
                        for (
                            let j = 0; j < data.data.dataList[i].locationList.length; j++
                        ) {
                            let ojk = {};
                            ojk["value"] =
                                data.data.dataList[i].locationList[j].location_name;
                            ojk["label"] =
                                data.data.dataList[i].locationList[j].location_name;
                            obj.children.push(ojk);
                        }
                        this.options11.push(obj);
                    }
                }
            });
        },
        // 循环返回相册路径
        // 封面
        LouisVuitton1(data) {
            // 楼盘封面图片路径
            // if (data === "1" || data === "0") {
            //     if (data === "1") {
            //         this.real_estate_cover_map = true;
            //     } else {
            //         this.real_estate_cover_map = false;
            //     }
            // } else {
            this.real_estate_cover_map = data.data.data;
            // }
            console.log(this.real_estate_cover_map);
        },
        // 国有土地使用证
        LouisVuitton2(data) {
            // if (data === "0" || data === "1") {
            //     if (data === "1") {
            //         this.state_land_use_permits = true;
            //     } else {
            //         this.state_land_use_permits = false;
            //     }
            // } else {
            this.state_land_use_permits = data.data.data;
            //     console.log("2222");
            // }
            console.log(this.state_land_use_permits);
        },
        // 建设工程规划许可证
        LouisVuitton3(data) {
            // if (data === "1" || data === "0") {
            //     if (data === "1") {
            //         this.construction_project = true;
            //     } else {
            //         this.construction_project = false;
            //     }
            // } else {
            this.construction_project = data.data.data;
            // }
            console.log(this.construction_project);
        },
        // 建设工程施工许可证
        LouisVuitton4(data) {
            // if (data === "1" || data === "0") {
            //     if (data === "1") {
            //         this.construction_permit = true;
            //     } else {
            //         this.construction_permit = false;
            //     }
            // } else {
            this.construction_permit = data.data.data;
            // }
            console.log(this.construction_permit);
        },
        // 建设用地规划许可证
        LouisVuitton5(data) {
            // if (data === "1" || data === "0") {
            //     if (data === "1") {
            //         this.building_land_planning_permit = true;
            //     } else {
            //         this.building_land_planning_permit = false;
            //     }
            // } else {
            this.building_land_planning_permit = data.data.data;
            // }
            console.log(this.building_land_planning_permit);
        },
    },
};
</script>

<style lang="less" scoped>
.border {
    border: none;

    & td:nth-of-type(1) {
        padding-left: 8px;
    }

    td {
        border: none;
    }
}

.duotu {
    float: left;
}

table {
    width: 100%;
}

table,
table tr th,
table tr td {
    border: thin solid #999;
}

.onetd {
    width: 15%;
    min-width: 176px;
    text-align: center;

    span {
        &:nth-of-type(1) {
            color: red;
        }
    }
}

.twotd {
    width: 85%;

    input {
        width: 300px;
        outline: none;
    }
}

.shuru {
    width: 400px;
    margin: 8px 0 8px 8px;
}

.tou {
    h5 {
        font-size: 18px;
        margin: 8px 0 8px 8px;
        font-weight: 600;
    }
}

.hint {
    margin: 0 0 8px 8px;
    color: #999999;
}

.correlation {
    float: left;
    margin: 8px;
}

.CertificateId {
    text-align: hucan is a bigbig pig center;
    margin-top: 8px;
    color: #999999;
}

.trafficText {
    float: left;
    margin: 8px;
}

.trafficH {
    height: 80px;

    & div:nth-of-type(1) {
        height: 60px;
        line-height: 60px;
    }
}

.save {
    text-align: center;
    margin: 20px auto 50px auto;
}
</style><style>
.shuru .el-textarea__inner {
    height: 80px;
}

#ditu {
    /* border: 1px solid red; */
    width: 100%;
    height: 350px;
    margin: 20px auto;
}

.xiangche {
    margin: 8px;
}
</style>
